<template>
    <div class="all-list">
        <el-card class="container mt-5">
            <div slot="header" class="clearfix">
                <span><span class="card-header-box"></span>操作日志</span>
                <a href="javascript:;" class="list-button float-right p-1" @click="logout">登出</a>
                <!--<el-button class="float-right p-1" @click="showDialog">查看结果</el-button>-->
                <span>
                    <el-form  class="float-right mr-3" :model="queryModel" label-width="0px" style="height: 0;margin-top: -15px;">
                        <el-form-item label=" ">
                            <el-input v-model="queryModel.keyword" placeholder="请输入用户名或权限进行检索">
                                <el-button slot="append" icon="el-icon-search" @click="queryKey"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </span>
            </div>
            <vue-table :data-source="tableList" :queryString="queryModel">
                <template slot="header">
                    <tr>
                        <th scope="col">用户名</th>
                        <th scope="col">操作内容</th>
                        <th scope="col">用户权限</th>
                        <th scope="col">时间</th>
                    </tr>
                </template>
                <template slot="tbody" slot-scope="props">
                    <tr :class=" props.index % 2 == 0 ? 'table-row':''">
                        <td>{{props.item.handlers}}</td>
                        <td>{{props.item.logs}}</td>
                        <td>{{props.item.type}}</td>
                        <td>{{props.item.created_at}}</td>
                    </tr>
                </template>
            </vue-table>
        </el-card>
        <div class=" mt-5">
            <cplanet-pagination :page-count="tableList.meta.last_page"
                                :total="tableList.meta.total"
                                :current-page="tableList.meta.current_page" @goPage="goPage"></cplanet-pagination>
        </div>
    </div>
</template>
<script>
  import ListDataSource from '../libs/ListDataSource.js'
  import DataApi from '../api/data'
  import Cookie from 'js-cookie';
  export default {
    data(){
      return{
        tableList: new ListDataSource('/api/logs'),
        queryModel:{
          keyword: null
        }
      }
    },
    created () {
      let vm = this
      this.isLoading = true
      Promise.all([
        vm.tableList.fetchData()
      ]).then(([Response]) => {
        vm.isLoading = false
      }).catch((error) => {
        vm.isLoading = false
      })
    },
    methods: {
      goPage: function (event) {
        let self = this
        let query = _.assign({page: event.page}, self.queryString);
        self.tableList.fetchData(query)
      },
      showDialog(){

      },
      logout(){
        axios.post('/api/logout', {})
          .then(function (response) {
            Cookie.remove('user');
            window.location.reload();
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      queryKey(){
        this.tableList.fetchData(this.queryModel)
      }
    },
    mounted: function () {

    },
  }
</script>
